<script setup>
import {onMounted, ref, reactive} from 'vue';
import {get, timestampToDate} from '../js/http.js';
import pagination from '../components/pagination.vue'
const page = ref(0)
const logData = ref({data:[],totalPage:0,page:0})
import icon from '../components/icon.vue'
import pageHead from '../components/pagehead.vue'

onMounted(() => {
  getLog();
})

async function getLog() {
  let url = "/admin/getLog";
  get(url, {page:page.value}).then(res => {
    logData.value = res.result;
  })
  .catch(error => console.log(error))
}
async function changeHandler(ipage) {

  if(ipage<=1){
    ipage = 0;
  }
  if(ipage>logData.value.totalPage){
    ipage = logData.value.totalPage;
  }
  page.value =ipage-1;
  getLog();
}

</script>
<template>
  <pageHead title="索引设置" iconName="modular">
    <button class="button is-link is-outlined mr-3" @click="getLog"><icon icon="refresh" class="is-link mr-1"></icon>刷新</button>
  </pageHead>

  <table class="table is-fullwidth">
    <thead>
    <tr>
      <th>编号</th>
      <th>任务</th>
      <th>起止时间</th>
      <th>成功结束</th>
      <th  style="max-width: 200px">结果</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item,itemIndex) in  logData.data" :key="item.id">
      <td><span class="tag is-light">{{ item.id }}</span></td>
      <td>{{ item.jobname }}</td>
      <td>{{ timestampToDate(item.begintime) }}--{{ timestampToDate(item.endtime) }}</td>
      <td>
        <span class="tag is-success is-light" v-if="item.jobflag==1">成功</span>
        <span class="tag is-danger is-light " v-else>失败</span>
      </td>
      <td class="ellipsis" :title="item.jobresult">{{ item.jobresult }}</td>
    </tr>
    </tbody>
  </table>
  <pagination :current-page="logData.page+1" :total-pages="logData.totalPage" @pageRefresh="getLog" @pageChange="changeHandler"></pagination>

</template>
<style scoped>
.ellipsis{
  max-width: 220px; /* 设置单元格最大宽度 */
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 文本超出部分显示省略号 */
  position: relative; /* 为tooltip定位做准备 */
}
</style>
